今天要來介紹的是現在比較常用處理非同步的方法分別是promise,這裡會先大幅度的簡化promise的用法,來先理解整個promise的運作概念。
1.創建 promise: 為什麼需要創建promise因為它是一個建構函式,所以需要使用關鍵字new去創建promise,裡面帶兩個參數分別為resolve, reject。
resolve:代表執行成功地回傳值
reject:代表執行失敗的回傳值
2.then&catch: .then()代表著promise執行成功後所需要執行的區塊,而且可以接reslove的回傳值;.catch()代表promise執行失敗後所需要執行的區塊,而且可以接reject的回傳值。
3.then串接: .then是可以串接的,甚至是可以在then裡面再多new一個Promise物件,來處理多個非同步的問題
綜合上述提到的三點,範例如下:
我需要依序console.log() 出1,2,3,4,但是2,3有setTimeout,所以需要利用new promise進行處理然後回傳處理成功。
new Promise((resolve, reject) => {
console.log(1)
setTimeout(()=>{
console.log(2);
resolve("success1");
}, 1000);
}).then((res)=>{
console.log(res)
return new Promise((resolve)=>{
setTimeout(()=>{
console.log(3);
resolve("success1")
}, 1000)
})
}).then((res)=>{
console.log(res)
console.log(4)
});
今天就先簡單介紹現在處理非同步的方法,但是強調promise還有很多種用法,但如果以一個初學的角度來看還是先熟悉基礎用法,會在使用上比較不容易造成混淆
事實上,ES6之後還有一個語法async await,它是promise的語法糖,在寫法上比promise更簡潔易懂,這部份就留做明天來介紹吧~